<template>
    <div>
        <div class="apply" v-for="item in list" :key="item.id">
            <div class="ball">
                <span>{{item.hypermarket}}</span>
                <p>{{item.No}}</p>
            </div>
            <div class="dao">
                <p>{{item.favourable}}</p>
                <p class="pp">{{item.NoUrl}}</p>
                <p class="pp">{{item.data}}</p>
            </div>
            <div class="quan">
                <i>￥ <span>{{item.money}}</span></i>
                <router-link :to="'/nhk'"><p>{{item.used}}</p></router-link>

            </div>
        </div>
        <!-- <div class="apply">
            <div class="ball">
                <span>商城</span>
                <p>无门槛券</p>
            </div>
            <div class="dao">
                <p>商城通用优惠券</p>
                <p class="pp">无门槛</p>
                <p class="pp">2021-9-10到期</p>
            </div>
            <div class="quan1">
                <i>￥ <span>50</span></i>
                <p>去使用</p>

            </div>
        </div> -->
    </div>
</template>

<script>
    export default {
        data(){
            return{
                list:[
                    {
                         hypermarket:"商城",
                         id:"88",
                         No:"无门槛券",
                         favourable:"商城通用优惠券",
                         NoUrl:"无门槛",
                         data:"2021-9-10到期",
                         money:"10",
                         used:"去使用"
                    },
                    {
                         hypermarket:"商城",
                         id:"80",
                         No:"无门槛券",
                         favourable:"商城拼团优惠券",
                         NoUrl:"限拼团商品",
                         data:"2021-9-10到期",
                         money:"50",
                         used:"去使用"
                    },
                    {
                         hypermarket:"商城",
                         id:"89",
                         No:"无门槛券",
                         favourable:"商城拼团优惠券",
                         NoUrl:"限拼团商品",
                         data:"2021-9-10到期",
                         money:"50",
                         used:"去使用"
                    }
                ]
            }
        },
        methods:{
            me(){
                this.$router.push("/nonuse")
            }
        }
    }
</script>

<style scoped>
.apply{
    width: 100vw;
    height: 20vh;
    background:#fff;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #999;
    
}
.ball{
    width: 20vw;
    height: 10vh;
    background: #409EFF;
    border-radius: 50%;
    position: relative;
    left: 30px;
}
.ball span{
    font-size: 18px;
    color: floralwhite;
    position: absolute;
    top: 17px;
    left: 18px;
    
}
.ball p{
    width: 20vw;
    height: 3vh;
    background: orange;
    color: #fff;
    position: absolute;
    text-align: center;
    margin-top: 8vh;
    border-radius: 50px;
}
.dao{
    margin-left: 50px;
}
.dao .pp{
    color: #999;
}
.quan{
    margin-left: 40px;
}
.quan i{
    font-size: 16px;
    font-style:normal;
    color: red;
}
.quan span{
    font-size: 32px;
}
.quan p{
    width: 20vw;
    height: 3vh;
    background: red;
    text-align: center;
    border-radius: 50px;
    color: #fff;
}


.apply1{
    width: 100vw;
    height: 20vh;
    background:#fff;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #999;
    
}
.ball1{
    width: 20vw;
    height: 10vh;
    background: #409EFF;
    border-radius: 50%;
    position: relative;
    left: 30px;
}
.ball1 span{
    font-size: 18px;
    color: floralwhite;
    position: absolute;
    top: 17px;
    left: 18px;
    
}
.ball1 p{
    width: 20vw;
    height: 3vh;
    background: orange;
    color: #fff;
    position: absolute;
    text-align: center;
    margin-top: 8vh;
    border-radius: 50px;
}
.dao1{
    margin-left: 50px;
}
.dao1 .pp{
    color: #999;
}
.quan1{
    margin-left: 40px;
}
.quan1 i{
    font-size: 16px;
    font-style:normal;
    color: red;
}
.quan1 span{
    font-size: 32px;
}
.quan1 p{
    width: 20vw;
    height: 3vh;
    background: #999;
    text-align: center;
    border-radius: 50px;
    color: #fff;
}
.tiaozhuan{
    position: absolute;
    color: plum;
    font-size: 28px;
    top: 3vh;
    left: 2vw;
    /* bottom: 5vh; */
}
</style>
<style>
body{
    background: #fff;
}
</style>